<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!--引入editor.md的css-->
    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css"
          th:href="@{/lib/editormd/css/editormd.min.css}">
    <link rel="stylesheet" href="../../static/css/semantic.min.css" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">

    <title th:replace="${title}">公共片段</title>
</head>


<body>

<th:block th:fragment="script">
    <!--引入jquery-->
    <script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <!--引入semantic-ui js-->
    <script src="../../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
    <!--引入editormd js-->
    <script src="../../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>

    <!--由于函数中使用了静态资源地址，动态也静态时不能相互共存，故放在这里转换-->
    <script>
        // 初始化editor.md编辑器
        // let contentEditor;
        $(function () {
            /*contentEditor = */
            editormd("md-content", {
                width: "100%",
                height: 640,
                syncScrolling: "single",
                // path: "../../static/lib/editormd/lib/"
                // 使用thymeleaf的引入方法
                path: "/lib/editormd/lib/"
            });
        });
        // 移动端点击菜单按钮，打开关闭菜单切换
        $('.menu.toggle').on('click', function () {
            // toggleClass : 开关事件 -> 开关样式
            $('.m-item').toggleClass('m-mobile-hide');
        });
        // 下拉选项卡鼠标悬浮弹出
        $('.ui.dropdown').dropdown({
            on: 'hover'
        });
        // 提示信息关闭按钮
        $('.message .close').on('click', function () {
            $(this).closest('.message').transition('fade')
        })
    </script>
</th:block>

</body>
</html>